<script setup>
import {computed, onMounted, ref} from "vue";
import store from "@/store";
import router from "@/router";

const image = ref("");
const account = computed(()=>{
  let account = store.state.account
  if(Object.keys(account).length){
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    image.value = `${process.env.VUE_APP_QRCODE_URL}/${account.code}`
  }
  return account;
})
onMounted(()=>{
  store.dispatch("getUser")
})
</script>

<template>
<div class="qrcode" v-if="Object.keys(account)">
  <div class="back" @click="router.replace({name:'home'})">
    <el-icon color="#fff" size="16"><ArrowLeft /></el-icon>
    <div>推广二维码</div>
  </div>
  <el-image :src="image" class="qrcode-img"/>
  <el-button round class="save-qrcode" icon="download" size="large">保存到相册</el-button>
</div>


</template>

<style scoped lang="less">
.qrcode{
  height: 100vh;
  //渐变背景
  background: linear-gradient(to bottom, rgba(44, 98, 246, 0.9) 45%, rgba(44, 98, 246, 0.45));
  position: relative;

  .qrcode-img{
    width: 220px;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -110px;
    border-radius: 16px;
  }
  .save-qrcode{
    position: absolute;
    z-index: 999;
    bottom: 30px;
    left: 20%;
    right: 20%;
    background: none;
    color: #fff;
  }

  .back{
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #ffffff;
    .el-icon{
      //padding: 5px;
      border-radius: 50%;
      border: 1px solid;
      margin-right: 10px;
    }
    //margin: 15px;
  }
}
</style>
